<template >
  <div class='regist_comp'>
    <div class="content">
      <div class="right">
        <div class="form">
          <h2>注册公司</h2>
          <a-upload
            name="icon"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="api/v1/icons"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img v-if="imageUrl" :src="imageUrl" alt="icon" />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                上传公司Log
              </div>
            </div>
          </a-upload>
          <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
            <a-row :gutter=[16,16]>
              <a-col span="12">
                <a-form-item label='公司名称' >
                  <a-input
                    v-decorator="['compName', { rules: [{ required: true, message: '请输入公司名称!' }] }]"
                    placeholder="公司名称"
                  />
                </a-form-item>
                <a-form-item label='公司类型' >
                  <a-select  
                    style="width: 300px"  
                    placeholder="公司类型" 
                    v-decorator="['compType', { rules: [{ required: true, message: '请选择公司类型!' }] }]"
                  >
                    <a-select-option v-for="(p, i) of COMPTYPE" :value="p.value" :key="i">{{p.label}}</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label='公司人数' >
                  <a-select  
                    style="width: 300px"  
                    placeholder="公司人数" 
                    v-decorator="['peopleNum', { rules: [{ required: true, message: '请选择公司人数!' }] }]"
                  >
                    <a-select-option v-for="(p, i) of COMPPEOPLE" :value="p.value" :key="i">{{p.label}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item label='公司网址' >
                  <a-input
                    v-decorator="['url', { rules: [] }]"
                    placeholder="公司网址"
                  ></a-input>
                </a-form-item>
                <a-form-item
                  name="city"
                  label="所在城市"
                >
                  <a-input  
                    style="width: 300px"  
                    v-decorator="['city',  { rules: [{ required: true, message: '请输入公司所在城市!' }] }]"
                    placeholder="所在城市"
                  />
                </a-form-item>
                <a-form-item label='详细地址' >
                   <a-input  
                      style="width: 300px"  
                      v-decorator="['address',  { rules: [{ required: true, message: '请输入公司详细地址!' }] }]"
                      placeholder="详细地址"
                    />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-form-item label='公司简介'>
                <a-textarea
                  v-decorator="['introduction',  { rules: [{ required: true, message: '请输入公司简介!' }] }]"
                  placeholder="公司简介"
                >
                </a-textarea>
              </a-form-item>
            </a-row>
            <a-button type="primary" html-type="submit" >
              注册
            </a-button>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import './styles.less'
import compAPI from '../../services/comp'
import { requestWrapper } from '../../utils/request'
import { Modal } from 'ant-design-vue';
import { COMPPEOPLE, COMPTYPE} from '../../const/const';

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  data() {
    return {
      formLayout: 'inline',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      activeKey: 'stu',
      sex: '1',
      loading: false,
      imageUrl: '',
      COMPPEOPLE: COMPPEOPLE,
      COMPTYPE: COMPTYPE
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          values.Logo = this.imageUrl || 'api/v1/icons?path=icons/de/50/de50d524261b5079146bd43d2d382a87.jpg'
          console.log(values);
          requestWrapper( compAPI.compReg.bind(null, values), {
              autoSuccess: true,
              successMessage: '注册成功！',
          }).then((res) => {
            this.$router.push({path:'/regist'})
          })
        }
      });
    },

    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = info.file.response.result.urlPath;
          this.loading = false;
        });
      }
    },

    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
  },
};

</script>


